<template>
  <div class="tuan">
    <div class="Img" >
        <span @click="changeIndex(index)" :class="{active:currentIndex1 == index}" v-for="(item,index) in swapList" :key="index">{{item}}</span>
    </div>
    <div class="tuanGoods">
        <div class="tuanList" v-for="(item,index) in tuanList" :key="index">
            <img :src="item.picture" alt="">
            <div class="infor">
                <div class="name">{{item.name}}</div>
                <div class="saled">
                    <span>{{item.unit}}</span>
                    <span>{{item.month_saled_content}}</span>
                </div>
                <div class="price">
                    <span>￥{{item.min_price}}</span>
                    <span v-for="(item,index) in purchase" :key="index">{{item}}</span>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>    
import {tuanList} from '../../utils/api'
export default {

    data(){
        return{
            currentIndex1:0,
            swapList:["正在抢购","上新预告"],
            purchase:["马上抢"],
            tuanList:[]
        }
    },
    mounted(){
        tuanList( {status:0} ).then((res)=>{
            console.log(res.data.list)
            this.tuanList = res.data.list;
        })
    },
    methods:{
        changeIndex(index){
            this.currentIndex1 = index;
        },
    }
}
</script>

<style>
    .Img{
        width: 100%;
        height: 120px;
        background-color: coral;
        position: relative;
    }
    .Img>span:nth-child(1){
        position: absolute;
        bottom: 20px;
        left: 10px;
        color: #fff;
    }
    .Img>span:nth-child(2){
        position: absolute;
        bottom: 20px;
        left: 100px;
        color: #fff;
    }
    .tuanGoods{
        margin: 0px 10px;
    }
    .tuanGoods>div{
        width: 90%;
        margin: 20px 0px;
        height: 120px;
        background-color: #fff;
        border-radius: 20px;
    }
    .tuanList{
        display: flex;
        justify-content: space-between;
    }
    .tuanList>img{
        width: 40%;
        margin-right: 20px;
    }
    .tuanList>.infor{
        width: 66%;
    }
    .tuanList>.infor>.name{
        font-weight: bold;
    }
    .tuanList>.infor>.saled{
        margin: 10px 0px;
    }
    .tuanList>.infor>.saled>span:nth-child(2){
        margin-left: 20px;
    }
    .tuanList>.infor>.price{
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
    }
    .tuanList>.infor>.price>span:nth-child(2){
        color: #fff;
        font-size: 14px;
        text-align: center;
        line-height: 36px;
        width: 80px;
        height: 36px;
        border-radius: 20px;
        display: inline-block;
        background-color: coral;
    }
    .Img>.active{
        border-bottom: 2px solid gold;
    }
</style>